import  { useState, useEffect } from 'react';
import { loadModules } from '@esri/react-arcgis';

const MyAGSTileLayer = (props) => {
    const [myAGSTileLayer, setMyAGSTileLayer] = useState(null);
    useEffect(() => {
        loadModules(['esri/layers/TileLayer']).then(([TileLayer]) => {
            const myAGSTileLayer = new TileLayer({
                url: props.agsTileLayerProperties.url
            });
            setMyAGSTileLayer(myAGSTileLayer);
            props.map.add(myAGSTileLayer);
        }).catch((err) => console.error(err));

        return function cleanup() {
            props.map.remove(myAGSTileLayer);
        }
    }, [ props ]);

    return null;
}
export default MyAGSTileLayer;

/**
 * 使用帮助:
 * <MyAGSTileLayer agsTileLayerProperties={{ url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer'}} />
 * 
 */